import React, { useEffect, useState } from 'react'
import GoBack from '@/components/SQGridList/GoBack'
import { getPracticeApi } from '@/Api'
import Select from '@/components/Practice/Select'
import Question from '@/components/Practice/Question'
import './practice.less'
import ListAltIcon from '@material-ui/icons/ListAlt';
import StarBorderIcon from '@material-ui/icons/StarBorder';
const cateEnum = {
    'all': '全部',
    'qa': '问答',
    'fill': '填空',
    'one': '单选',
    'many': '多选',
    'code': '编程',
    'check': '判断',
}
// 手指触摸点
let startX = -1;
// 手指松开点
let endX = -1;
// 当前li的索引值
let liIndex = 0;
export default function Practice(props) {
    const state = JSON.parse(localStorage.getItem('state'))
    const params = state
    const [testNum, setTestNum] = useState(params.testNum)
    const [ulLeft, setUlLeft] = useState(0)
    const [data, setData] = useState([])
    if(props.location.state){
        localStorage.setItem('liIndex',props.location.state.liIndex)
    }
    useEffect(() => {
        liIndex = localStorage.getItem('liIndex') ? Number(localStorage.getItem('liIndex')) * -1 : 0
        setUlLeft(100 * liIndex + '%')
        getPracticeApi(params).then(res => {
            const { data } = res
            data.forEach(el => {
                el.zh = cateEnum[el.questionType]
            });
            setData(data)
            setTestNum(data.length)
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

    }, [])
    const start = (e) => {
        startX = e.touches[0].clientX
    }
    const move = (e) => {
        endX = e.touches[0].clientX
    }
    const end = (e) => {
        // 获取滑动范围
        if (startX > -1 && endX > -1) {
            let distance = Math.abs(startX - endX);
            if (distance > 50) {
                // 两个手指位置距离相差50px，即视为要滑动
                if (startX > endX) {
                    liIndex--;
                    // index是不能超过数组长度的
                    if (Math.abs(liIndex) >= data.length - 1) {
                        liIndex = -data.length + 1;
                    }
                } else {
                    liIndex++;
                    if (liIndex >= 0) {
                        liIndex = 0;
                        localStorage.setItem('liIndex',0)
                    }
                }
                setUlLeft(100 * liIndex + '%')
                startX = -1;
                endX = -1;
            } else {
                return;
            }
        }
    }

    return (
        <div className="practice">
            <div className="practice-top flex">
                <div className="left flex">
                    <ListAltIcon />
                    {Math.abs(liIndex) + 1} / {testNum}
                </div>
                <div className="right flex">
                    收藏
                    <StarBorderIcon />
                </div>
            </div>
            <div className="questionArr" onTouchStart={start} onTouchMove={move} onTouchEnd={end}>
                <div className="questionUl flex" style={{ left: ulLeft, width: `${data.length}00%` }}>
                    {

                        data.map(item => {
                            if (item.zh === '问答' || item.zh === '编程') {
                                return (
                                    <div style={{ width: 100 / data.length + "%" }}> <Question data={item} key={item.id} actionCode={state.actionCode}></Question></div>
                                )
                            } else {
                                return <div style={{ width: 100 / data.length + "%" }}>  <Select data={item} key={item.id} actionCode={state.actionCode}></Select></div>
                            }
                        })
                    }
                </div>
            </div>

            <GoBack></GoBack>
        </div>
    )
}
